<template>
  <div class="container">
    <view style="padding-top: 20px">
      <van-cell-group inset v-for="(item, index) in addressList" :key="index">
        <van-cell
            :border="false"
            :title="item.name"
            :value="item.phone"
            @click="handleEdit(item)"
        ></van-cell>
        <van-cell :title="item.address"></van-cell>
        <van-cell title="默认地址" icon="passed">
          <van-icon name="edit" />编辑
          <van-icon name="delete-o"  style="margin-left: 10px"/>删除
        </van-cell>
      </van-cell-group>
    </view>

    <view class="address-footer">
      <view class="address-btn" @click="handleAdd">新增地址</view>
    </view>
  </div>
</template>

<script>

export default {
  data() {
    return {
      addressList: [
        {
          id: 1,
          name: '张三',
          phone: '13800138000',
          address: '北京市海淀区中关村大街1号',
          isDefault: true
        }
      ]
    }
  },

  methods: {
    handleAdd() {
      console.log('add')
      mpvue.navigateTo({ url: '/pages/user/address/edit/main' })
    },

    handleEdit(item) {
      mpvue.navigateTo({
        url: `/pages/user/address/edit/main?id=${item.id}`
      })
    },
  }
}
</script>

<style>
.address-footer {
  height: 160rpx;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
}
.address-btn {
  width: 400rpx;
  height: 88rpx;
  border-radius: 44rpx;
  color: #FFFFFF;
  text-align: center;
  line-height: 88rpx;
  margin-left: 26rpx;
  background-color: #E84134;
}
</style>
